import React from 'react';
import { Button, Select } from 'antd';
import { WeaSelect, WeaBrowser, WeaTools, WeaInput, WeaFormItem } from 'ecCom';
import { WeaSwitch } from 'comsMobx';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@inject('coworkMainStore')
@observer
export default class Search extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
      reset: false,
      style: {
        width: 235,
        height: 30,
        boxShadow: '0 0 0 0 #fff',
      },
		};
	}
  handleSubmit = () => {
    this.props.search();
    this.props.onTran(false);
  }

	render() {
    const { form } = this.props.coworkMainStore.leftList;
    const { isFormInit } = form;
    if (!isFormInit) return null;
    let reset = false;
		return (
      <div className="search-details" style={{ display: this.props.show }}>
        <div>
          <ul>{
            this.props.datas[0] && this.props.datas[0].items.map((data, index) => (<SearchItem
              description={data.label}
              com={<WeaSwitch fieldConfig={data} form={form} />}
            />))
          }</ul>
        </div>
        <div className="dividing-line" />
        <div className="btn-collection">
          <Button type="primary" onClick={this.handleSubmit}>{getLabel(197, '搜索')}</Button>
          <Button type="ghost" onClick={this.reset}>{getLabel(2022, '重置')}</Button>
          <Button type="ghost" onClick={() => { this.props.onTran(false); }}>{getLabel(201, '取消')}</Button>
        </div>
      </div>
			);
	}
	reset = () => {
    const { form } = this.props.coworkMainStore.leftList;
    form.resetConditionValue();
	}
}

class SearchItem extends React.Component {
	constructor(props) {
		super(props);
	}
	render() {
    const formItemLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 16 },
    };
		return (
				<li className="search-details-line">
          <WeaFormItem
            {...formItemLayout}
            label={this.props.description}
          >
  					<span />
  					<div className="search-bar">{this.props.com}</div>
          </WeaFormItem>
				</li>
			);
	}
}

// Search = Form.create()(Search);
